<template>
  <dv-full-screen-container class="full_container">
    <div v-if="showLoading" class="showLoading">
      <dv-loading>Loading...</dv-loading>
    </div>
    <div v-else>
      <!-- 头部图片 -->
      <div class="title_img header_img">
        <img src="../../../static/images/logistics-title.png" />
      </div>

      <div class="app_main">
        <!-- 按钮list -->
        <div class="btn_list">
           <button class="btn" :class="activeBtn==='week'?'activeBtn':''" @click="activeBnt('week')" @touchstart.stop.prevent="touchstartAction('week')">本周</button>
           <button class="btn" :class="activeBtn==='today'?'activeBtn':''" @click="activeBnt('today')"  @touchstart.stop.prevent="touchstartAction('today')">当日</button>
           <button class="btn" :class="activeBtn==='month'?'activeBtn':''" @click="activeBnt('month')"  @touchstart.stop.prevent="touchstartAction('month')">本月</button>
        </div>
        <!-- 数据区块显示 -->
        <div class="datav_list">
          <div class="datav_item">
            <div class="item_img">
              <img src="../../../static/images/icon1.png" class="icon_img" />
            </div>
            <div class="item_text">
              <p class="f14">自营车使用/辆</p>
              <p class="f24 fw600 cw">{{overviewData.carNumber}}</p>
            </div>
          </div>
          <div class="datav_item">
            <div class="item_img">
              <img src="../../../static/images/icon2.png" class="icon_img" />
            </div>
            <div class="item_text">
              <p class="f14">外调车使用/辆</p>
              <p class="f24 fw600 cw">{{overviewData.otherCarNumber}}</p>
            </div>
          </div>
          <div class="datav_item">
            <div class="item_img">
              <img src="../../../static/images/icon3.png" class="icon_img" />
            </div>
            <div class="item_text">
              <p class="f14">回头车使用/辆</p>
              <p class="f24 fw600 cw">{{overviewData.useReturnCarNumber}}</p>
            </div>
          </div>
          <div class="datav_item">
            <div class="item_img">
              <img src="../../../static/images/icon4.png" class="icon_img" />
            </div>
            <div class="item_text">
              <p class="f14">未使用回头车/辆</p>
              <p class="f24 fw600 cw">{{overviewData.unUseReturnCarNumber}}</p>
            </div>
          </div>
        </div>
        <!-- 轮播表 -->
        <div class="data_scroll_list">

              <dv-border-box-10 class="scroll_item">
                <div class="item_header_img">
                   <img src="../../../static/images/selfCar.png" />
               </div>
               <dv-scroll-board :config="carConfig" style="width:100%;height:100%;background: rgba(6, 7, 107, 0.59);font-size:10px" />
              </dv-border-box-10>

             <dv-border-box-10 class="scroll_item">
               <div class="item_header_img">
                   <img src="../../../static/images/otherCar.png" />
               </div>
               <dv-scroll-board :config="otherCarConfig" style="width:100%;height:100%;background: rgba(6, 7, 107, 0.59);font-size:10px" />
             </dv-border-box-10>

             <dv-border-box-10 class="scroll_item">
               <div class="item_header_img">
                   <img src="../../../static/images/backCar.png" />
               </div>
               <dv-scroll-board :config="returnCarConfig" style="width:100%;height:100%;background: rgba(6, 7, 107, 0.59);font-size:10px" />
             </dv-border-box-10>
        </div>

      </div>
    </div>
  </dv-full-screen-container>
</template>

<script>
import WsClient from 'lola-ws-client'
import untils from '@/untils/index.js'
export default {
  components: {},
  data () {
    return {
      showLoading: true,
      activeBtn: 'week',
      overviewData: {carNumber: 0, otherCarNumber: 0, unUseReturnCarNumber: 0, useReturnCarNumber: 0},
      car: [],
      carConfig: {},
      otherCar: [],
      otherCarConfig: {},
      returnCar: [],
      returnCarConfig: {},
      sockect: null
    }
  },
  created () {
    this.sockect = new WsClient(this.$config.ws, (rsp) => {
      console.log('message')
    }, () => {
      console.log('ws connected')
    })
    this.initWs()
    // console.log({startDate: untils.funDate(-2), endDate: untils.funDate()})
  },
  methods: {
    touchstartAction (val) {
      console.log('监听到触摸屏幕触摸点击开始事件')
      this.activeBtn = val
      this.sendOverviewDirect()
    },
    activeBnt (val) {
      this.activeBtn = val
      this.sendOverviewDirect()
    },
    initWs () {
      const that = this
      this.sockect.onOpen = () => {
        // 注入行情推送结果处理器
        that.sockect.addListner(that.$config.wsDirect.LOGIN, (res) => {
          console.log(res)
        })
        that.sockect.addListner(that.$config.wsDirect.QUERY_LOGISTICS_OVERVIEW, that.dealOverview)
        that.sockect.addListner(that.$config.wsDirect.QUERY_LOGISTICS_CAR, that.dealQueryCar)
        that.sockect.addListner(that.$config.wsDirect.QUERY_LOGISTICS_OTHER_CAR, that.dealQueryOtherCar)
        that.sockect.addListner(that.$config.wsDirect.QUERY_LOGISTICS_RETURN_CAR, that.dealQueryReturnCar)
        that.sockect.addListner(that.$config.wsDirect.PUSH_LOGISTICS, that.dealPushLogistices)
        that.sockect.addListner(that.$config.wsDirect.PUSH_RELOAD, (res) => {
          console.log('监听到页面刷新指令,即将刷新页面===============')
          console.log(res)
          setTimeout(() => {
            window.location.reload()
          }, 1500)
        })
        that.login()
      }
      this.sockect.onMessage = (r) => {
        // console.log(r)
      }
      this.sockect.onClose = (res) => {
        console.log('断开重连中 wait.........')
        this.initWs()
      }
      this.sockect.init()
    },
    login () {
      console.log('===尝试发送ws登录===START===')
      const that = this
      that.sockect.send(that.$config.wsDirect.LOGIN, { userName: '1', password: '', verifyCode: '' }, function (rep) {
        if (rep.code === 200) {
          that.sendOverviewDirect()
          that.sendCarDirect()
          that.sendOhterCarDirect()
          that.sendReturnCarDirect()
          that.subscriber() // 发送订阅请求
        } else {
          // console.log('===发送失败===')
        }
      })
      console.log('===尝试发送ws登录===END===')
    },
    subscriber () {
      console.log('===尝试发送订阅请求===START===')
      const that = this
      that.sockect.send(that.$config.wsDirect.PUSH_REQUEST, null, function (rep) {
        if (rep.code === 200) {
          // console.log('===发送成功===')
        } else {
          // console.log('===发送失败===')
        }
      })
      console.log('===尝试发送订阅请求===END===')
    },
    sendOverviewDirect () {
      console.log('===尝试发送数据概览请求===START===')
      const that = this
      that.sockect.send(that.$config.wsDirect.QUERY_LOGISTICS_OVERVIEW, {timeType: that.activeBtn}, function (rep) {
        if (rep.code === 200) {
          // console.log('===30002发送成功===')
        } else {
          // console.log('===30002发送失败===')
        }
      })
      console.log('===尝试发送数据概览请求===END===')
    },
    sendCarDirect () {
      console.log('===尝试发送自营车辆指令===START===')
      const that = this
      that.sockect.send(that.$config.wsDirect.QUERY_LOGISTICS_CAR, {startDate: untils.funDate(-2), endDate: untils.funDate()}, function (rep) {
        if (rep.code === 200) {
          // console.log('===30003发送成功===')
        } else {
          // console.log('===30003发送失败===')
        }
      })
      console.log('===尝试发送自营车辆指令===END===')
    },
    sendOhterCarDirect () {
      console.log('===尝试发送外调车车辆指令===START===')
      const that = this
      that.sockect.send(that.$config.wsDirect.QUERY_LOGISTICS_OTHER_CAR, {startDate: untils.funDate(-2), endDate: untils.funDate()}, function (rep) {
        if (rep.code === 200) {
          // console.log('===30004发送成功===')
        } else {
          // console.log('===30004发送失败===')
        }
      })
      console.log('===尝试发送外调车车辆指令===END===')
    },
    sendReturnCarDirect () {
      console.log('===尝试发送回头车车辆指令===START===')
      const that = this
      that.sockect.send(that.$config.wsDirect.QUERY_LOGISTICS_RETURN_CAR, {startDate: untils.funDate(-2), endDate: untils.funDate()}, function (rep) {
        if (rep.code === 200) {
          // console.log('===30005发送成功===')
        } else {
          // console.log('===30005发送失败===')
        }
      })
      console.log('===尝试发送回头车车辆指令===END===')
    },
    dealOverview (val) {
      console.log('监听到物流推送=>初始话数据概览======')
      console.log(val)
      if (val.body.code === 200) {
        this.overviewData = val.body.data
        this.showLoading = false
      }
    },
    dealQueryCar (val) {
      console.log('监听到物流推送=>自营车辆======')
      console.log(val)
      if (val.body.code === 200) {
        let list = val.body.data
        let tmp = []
        list.map((item, index) => {
          tmp.push([item.carNo, item.startArea + item.startAddress, item.shipmentsTime])
        })
        this.carConfig = {
          header: ['车辆信息', '发货地', '发货时间'],
          data: tmp,
          headerHeight: 36,
          headerBGC: '#0D1B6D',
          oddRowBGC: '#02063a',
          evenRowBGC: '#030842',
          rowNum: 10,
          waitTime: 3000,
          columnWidth: [120, 300],
          align: ['left']
        }
      }
    },
    dealQueryOtherCar (val) {
      console.log('监听到物流推送=>外调车辆======')
      console.log(val)
      if (val.body.code === 200) {
        let list = val.body.data
        let tmp = []
        list.map((item, index) => {
          tmp.push([item.carNo, item.startArea + item.startAddress, item.shipmentsTime])
        })
        this.otherCarConfig = {
          header: ['车辆信息', '发货地', '发货时间'],
          data: tmp,
          headerHeight: 36,
          headerBGC: '#0D1B6D',
          oddRowBGC: '#02063a',
          evenRowBGC: '#030842',
          rowNum: 10,
          waitTime: 3000,
          columnWidth: [120, 300],
          align: ['left']
        }
      }
    },
    dealQueryReturnCar (val) {
      console.log('监听到物流推送=>回头车车辆======')
      console.log(val)
      if (val.body.code === 200) {
        let list = val.body.data
        let tmp = []
        list.map((item, index) => {
          tmp.push([item.carNo, item.startArea + item.startAddress, item.shipmentsTime])
        })
        this.returnCarConfig = {
          header: ['车辆信息', '发货地', '发货时间'],
          data: tmp,
          headerHeight: 36,
          headerBGC: '#0D1B6D',
          oddRowBGC: '#02063a',
          evenRowBGC: '#030842',
          rowNum: 10,
          waitTime: 3000,
          columnWidth: [120, 300],
          align: ['left']
        }
      }
    },
    dealPushLogistices (val) {
      // console.log('订阅物流订单变化--------------star')
      // console.log(val)
      // console.log('订阅物流订单变化--------------end')
      var that = this
      var res = val.body
      that.sendOverviewDirect()
      if (val.code === 200) {
        var tmp = [res.carNo, res.startArea + res.startAddress, res.shipmentsTime]
        if (res.creatorId === that.$config.otherCarId) { // 外调车
          let data = that.otherCarConfig.data
          data.unshift(tmp)
          this.otherCarConfig = {
            header: ['车辆信息', '发货地', '发货时间'],
            data: data,
            headerHeight: 36,
            headerBGC: '#0D1B6D',
            oddRowBGC: '#02063a',
            evenRowBGC: '#030842',
            rowNum: 10,
            waitTime: 3000,
            columnWidth: [120, 300],
            align: ['left']
          }
          console.log('监听到物流推送=>外调车车辆发货推送======')
          console.log(this.otherCarConfig)
        } else { // 自营车
          if (res.lineType === 0) { // 直达
            let data = that.carConfig.data
            data.unshift(tmp)
            this.carConfig = {
              header: ['车辆信息', '发货地', '发货时间'],
              data: data,
              headerHeight: 36,
              headerBGC: '#0D1B6D',
              oddRowBGC: '#02063a',
              evenRowBGC: '#030842',
              rowNum: 10,
              waitTime: 3000,
              columnWidth: [120, 300],
              align: ['left']
            }
            console.log('监听到物流推送=>自营车车辆发货推送======')
            console.log(this.carConfig)
          } else if (res.lineType === 1) { // 回头
            let data1 = that.carConfig.data
            data1.unshift(tmp)
            this.carConfig = {
              header: ['车辆信息', '发货地', '发货时间'],
              data: data1,
              headerHeight: 36,
              headerBGC: '#0D1B6D',
              oddRowBGC: '#02063a',
              evenRowBGC: '#030842',
              rowNum: 10,
              waitTime: 3000,
              columnWidth: [120, 300],
              align: ['left']
            }
            let data2 = that.returnCarConfig.data
            data2.unshift(tmp)
            this.returnCarConfig = {
              header: ['车辆信息', '发货地', '发货时间'],
              data: data2,
              headerHeight: 36,
              headerBGC: '#0D1B6D',
              oddRowBGC: '#02063a',
              evenRowBGC: '#030842',
              rowNum: 10,
              waitTime: 3000,
              columnWidth: [120, 300],
              align: ['left']
            }
            console.log('监听到物流推送=>回头车车辆发货推送======')
            console.log(this.carConfig)
            console.log(this.returnCarConfig)
          }
        }
      }
    }
  }
}
</script>

<style scoped>

.showLoading {
  margin: 20% auto;
  color: white;
}
.full_container {
  width: 100%;
  height: 100%;
  background: url("../../../static/images/background.png");
  overflow: hidden;
  margin: 0;
}
.title_img {
  width: 80%;
  height: 15%;
  margin: 0 auto;
}
.title_img img {
  width: 100%;
}
.app_main {
  height: 85%;
  width: 95%;
  margin: 0 auto;
}

/* 按钮list */
.btn_list {
  margin-top: 5px;
  text-align: center;
}
.btn {
  width: 50px;
  background: rgba(13, 27, 109, 1);
  color: white;
  border: none;
  padding: 5px 10px;
}
.btn::after {
  border: none;
}
.activeBtn {
  background: #2a2aedff;
}

/* 区块概览 */
.datav_list {
  margin-top: 10px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.icon_img {
  width: 48px;
  height: 48px;
}
.datav_item {
  width: 24%;
  display: flex;
  justify-content: space-around;
  background: rgba(6, 7, 107, 0.59);
  padding: 20px 0;
  color: white;
}
.item_img{
  flex: 1;
  text-align: center;
  vertical-align: middle;
}
.item_text p{
  margin: 0;
  height: 24px;
}
.item_text {
  flex: 2;
  text-align: left;
  color: #01C2E4FF;
}

/* 轮播表 */
.data_scroll_list{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-top: 15px;
  height: 64vh;
  overflow: hidden;
}
.scroll_item{
  width: 33%;
  height: 100%;
  overflow: hidden;
  /* border: 1px solid white; */
  background: rgba(6, 7, 107, 0.59);
}
.item_header_img{
  width: 100%;
  height: 45px;
  text-align: center;
   /* margin-bottom: 5px; */
}

</style>
